動態網頁概念

DHTML是 Dynamic HTML 的簡稱，相較於 HTML 它更強調網頁的動態表現，所謂動態網頁即是指：網頁在瀏覽器中能依據參觀者的操作或時間狀態的變化適時地改變網頁內容。由於 HTML 僅能依靠標記語法來展現網頁內容，並沒有動態改變的能力，因此必須將網頁內容物件模型化（DOM）接著透過 Script 語言來操控它的內容，另外再結合事件驅動機制以便反映參觀者的操作，同時為了讓動態網頁能展現更精彩的視覺變化，又加上了串接樣式表的支援，如果用公式來表示，可以寫為 DHTML = DOM + Events + Script + CSS。

網頁物件模型(DOM)

物件這個名詞在程式設計領域裡，是一個很重要的觀念，它是從靜態的資料結構（例如：陣列） 蛻變出來的。我們可以把靜態的資料結合組裝成各種結構，也可以應用同一種思維把片段程式碼重新組裝成獨立的有機結構，因此發明了物件 導向程式設計，可以根據程式的需求盡情地重新組合物件，例如：網頁不也是從有限的標 籤中組合成無限的版面變化。

程式運作需要使用變數或把變數組合成資料結構，有時候程式也需要輸入或輸出變數值，因此物件應該包含：內建函式、私有或公用變數、變數預設值，而其中某些關鍵變數值可以從物件外部直接指定或變更。

雖然微軟公司也引用物件導向設計觀念，來處理網頁物件模型（DOM），但是它卻又自己發明許多新名詞，譬如：內建函式被改稱為方法（method），變數則被稱為屬性。

DOM 樹狀階層結構

在 IE DOM 裡面，最大的物件是 window，它也是 DOM 裡面少數沒有對應標籤的物件之一，window 事實上就是 IE 主程式所開啟的視窗，我們可以透過它來呼叫 IE 的程式功能表或狀態列。window 有六個從屬物件和一個物件集合。

• navigator：這個物件用來偵測瀏覽器名稱、廠商、版本、能力...等
• external：這個物件用來呼叫 IE 主程式功能表
• history：也就是瀏覽器中的歷史清單，用來跳到上一頁或下一頁
• location：這個物件就是 IE 的網址列
• screen：這個物件就是目前桌面的螢幕設定
• event：雖然每個物件都有自己的事件處理器，但若是要寫一個互動遊戲，需要規劃每個鍵盤按鍵的功能，就不能沒有一個綜觀全局的前置處理器，event 物件可以說是所有事件的統一指揮中心
• document：這個物件就是對應到整個網頁的內容
• frames：是框架物件的集合，假如網頁有使用框架的話，則在 window 與 document 之間，將會多出這一層

對於程式來說，document物件很重要， 因此說明一下document 物件常用的從屬物件及物件集合

body：這個物件對應 body 標籤，用來處理背景圖及捲軸棒樣式
all：所有標籤對應物件的集合（body 物件不算，因為一份文件只有一個 body）
anchors：所有 a 標籤的集合
applets：所有控制元件（applet 標籤）的集合，例如：JAVA、Flash、AVI電影、統計圖表....等
embeds：文件中所有 embeds 標籤的集合
filters：CSS 視覺濾鏡的集合
frames：所有嵌入框架（iframe 標籤）的集合
forms：所有輸入表單（form 標籤）的集合
images：所有圖片（img 標籤）的集合
stylesheets：所有樣式性質的集合（定義在 style 標籤裡的才算）

事件驅動與沸升

事件驅動並非 DHTML 而發明的，是整個 windows 系統就是以事件驅動的方式在運作。當移動滑鼠游標在IE的視窗內游走時，滑鼠的游標位置就會透過滑鼠驅動程式回報給作業系統，作業系統將此一事件轉換成描述字串，稱為事件訊息，事件訊息會被傳送給所有執行中的程式，讓程式決定是否要回應或忽略，假設該訊息傳送給 IE 主程式，主程式依據座標判斷，發現滑鼠游標正移到網頁的某圖片上，因此決定給予回應。於是呼叫該圖片的事件處理程式出來執行。

網頁物件化以後，為了讓程式設計師能根據不同事件自由地處理回應方式，因此在每個物件上設計有事件處理器，此一程式容器為事先定義好的空函式，其內容可以由程式設計師自由取代。

串接樣式表(CSS)

串接樣式表是為了彌補 HTML 的排版功能不足而設計的，透過 CSS 原本 HTML 表現不出來的聲光效果，現在已經獲得大幅度的改善。所以使用 MS Word 編輯 doc 的文件時，可以原封不動地轉換成網頁顯示出來，其關鍵就在於使用了 CSS。

CSS讓HTML標籤有底下的新功能：

• 能夠以像素為單位精準的定位：過去只能使用相對位置來佈置版面，透過CSS允許改用絕對位置來擺放網頁元件。
• 將色彩及背景變化擴充給所有的容器物件：過去不能設定段落的背景，不能讓表單元件顯示顏色，不能改變邊框的大小樣式。
• 網頁上的元件具備2.5D的圖層概念：透過z-index這個性質，可以讓網頁元件互相交疊，配合Script程式設計出各種動畫演出的效果！
• 能夠將網頁元件暫時隱藏或顯現：程式設計師使用這個新的visibility性質，很容易設計出可以摺收的功能表單。